<template>
    <div>
         <my-head title="我的订单" :back="false"></my-head>
        <van-tabs class="List" >
  <van-tab title="待付款">
        <div v-if="userInfo" class="list">
      <div v-if="cartlength > 0">



        <div class="cartlist" v-for="(item, index) in cartList" :key="index">
          <!-- <input
            type="checkbox"
            name=""
            id=""
            class="checkone"
            v-model="cartCheck[index]"
            @click="checkone(index)"
          /> -->
          <img :src="item.good.mainImg" alt="" />

          <div class="cart-r">
            <h2>{{ item.good.spuName }}</h2>
            <h1>￥{{ item.good.price }}</h1>
            <!-- <van-stepper
              v-model="value[index]"
              @plus="add(index)"
              @minus="reduce(index)"
            /> -->
            <p>X{{value[index]}}</p>
          </div>
          <!-- <van-button type="danger" class="delete" @click="deleteone(index)"
            >删除</van-button
          > -->
        </div>




        <div class="cart-foot">
          <!-- <span>
            <input type="checkbox" class="allcheck" v-model="checkAll" />全选
          </span> -->
          <div class="cartshop">
            <span>合计:({{ All_pri }})</span>
            <span class="cartshop_span" @click="gotoorder"
              >结算:{{ sum_all }}</span
            >
          </div>
        </div>


         </div>


      <div v-else>
           <div class="nocart">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0185845d81ddeea8012060be310913.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649318236&t=254ded68bf62ff2722108f50da2ebd8c"
            alt=""
          />
             <span>您的订单为空,请去购物车添加商品</span>
           </div>
            
            
         </div>


           </div>



    <div v-else>
      <div class="nocart">
        <p>您还未登录</p>
        <button @click="gotoWhere({ name: 'login' })">请登录</button>
      </div>
    </div>
    </van-tab>

    
  <van-tab title="待发货"></van-tab>
  <van-tab title="待收货"></van-tab>
  <van-tab title="待评价"></van-tab>
  <van-tab title="退换货"></van-tab>
</van-tabs>
    </div>
</template>


<script>
export default {
  data() {
    return {
      cartList: [],
      value: [],
      cartCheck: [],
      cartId: [],
      cartlength: null,
      sumAll: [],
      priAll: [],
    };
  },
  methods: {
    gotoorder() {
      this.gotoWhere({
        name: "pay",
      });
    },
    checkone(index) {
      let check = this.cartList[index].check;
      console.log(check);
      this.$ajax.setvalue(this.cartId[index], { check: !check }).then((res) => {
        this.$toast("修改成功");
        this.findcart();
      });
    },

    add(index) {
      this.$ajax
        .setvalue(this.cartId[index], {
          count: this.value[index] + 1,
        })
        .then((res) => {
          this.$toast("修改成功");
          this.findcart();
        });
    },
    reduce(index) {
      this.$ajax
        .setvalue(this.cartId[index], { count: this.value[index] - 1 })
        .then((res) => {
          this.$toast("修改成功");
          this.findcart();
        });
    },
 
    async findcart() {
      let res = await this.$ajax.findcart({
        username: this.userInfo.username,
        check:true
      });
      this.cartList = res;
      console.log(res);
      this.cartlength = res.length;
      for (let i = 0; i < this.cartList.length; i++) {
        this.value.push(this.cartList[i].count);
        this.cartId.push(this.cartList[i].id);
        this.cartCheck.push(this.cartList[i].check);
        // console.log(this.cartCheck);
      }
    },
  },
  computed: {
    checkAll: {
      get() {
        let flag = true;
        this.cartList.forEach((v) => {
          if (!v.check) {
            flag = false;
            return;
          }
        });
        return this.cartList.length != 0 ? flag : false;
      },

      set(value) {
        this.cartList.forEach((v) => {
          for (let i = 0; i < this.cartList.length; i++) {
            this.$ajax
              .setvalue(this.cartId[i], {
                check: value,
              })
              .then((res) => {
                this.cartCheck.splice(i, 1, value);
              });
          }
          console.log(value);
          v.check = value;
        });
      },
    },
    sum_all() {
      let sum = 0;
      this.cartList.forEach((v) => {
        if (v.check) {
          sum += v.count * 1;
        }
      });
      return sum;
    },
    All_pri() {
      let pri = 0;
      this.cartList.forEach((v) => {
        if (v.check) {
          pri += v.count * (v.good.price * 1);
        }
      });
      return pri;
    },
  },
  mounted() {
    this.findcart();
  },
};
</script>



<style lang="scss" scoped>
.carts {
  width: 100%;
  background: #f7f8f8;
  }
 
   .checkone {
      width: 30px;
      height: 30px;
      border-radius: 20px;
      margin-top: 40px;
    }
   img {
      height: 130px;
      width: 120px;
    }
   .cart-r {
      padding-right: 5px;
      padding-top: 20px;
      width: 200px;
      height: 150px;
    
    
    }
    h2 {
        font-size: 16px;
      }
    h1 {
        color: red;
        font-size: 18px;
      }
   .delete {
      margin-top: 40px;
      width: 80px;
      border-radius: 10px;
    }
  .cart-foot {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    color: #f30b4d;
    font-size: 20px;
    padding: 0px 10px;
    background: white;
    line-height: 50px;
  }
 
  .cart-foot input {
    height: 20px;
    width: 20px;
    margin-right: 10px;
  }
  .cartshop span {
    display: inline-block;
    margin-left: 30px;
  }
  .cartshop_span {
    height: 50px;
    border-radius: 30px;
    background: #e40e4a;
    color: white;
    text-align: center;
    line-height: 50px;
    padding: 0px 10px;
    border: 1px solid #ec0748;
    width: 150px;
   
  }

  .nocart {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .nocart {
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 20px;
  }
  .nocart img {
    height: 100%;
    width: 100%;
  }
  .nocart button {
    margin-top: 10px;
    background: orange;
    color: #f7f8f8;
    border-radius: 6px;
    padding: 10px;
  }
   .cartlist {
    width: 100%;
    display: flex;
    background: #fff;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 50px;
    height: 120px;
   
   
   
   
  }


.List{
     margin-top: 50px;
}
</style>